/**
 * 手机验证号弹窗
 */

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Row, Col, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getCode, verificationCode } from '@/services/user';
import useUserStore from '@/stores/user.js'

const PhoneModal = ({ phoneVisible, handleOk, handleCancel }) => {
  const [second, setSecond] = useState(0);
  const [loading, setLoading] = useState(false);
	const userInfo = useUserStore(state => state.userInfo);
  useEffect(() => {
    if (phoneVisible) {
      form.resetFields();
    }
  }, [phoneVisible]);

  const layout = {
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 13,
    },
  };

  const [form] = Form.useForm();

  //获取验证码
  const code = async (val) => {
    const res = await getCode({
      ...val,
      type: 9,
    });
    if (res.success) {
      message.success('验证码发送成功!');
    }
  };

  //获取验证码点击校验倒数事件
  const verification = async () => {
    form.validateFields(['mobile']).then((value) => {
      let num = 59;
      setSecond(59);
      let seconds = setInterval(() => {
        num = num - 1;
        setSecond(num);
        if (num === 0) {
          clearInterval(seconds);
          setSecond(0);
        }
      }, 1000);
      code(value);
    });
  };

  //取消弹框点击事件
  const ModalCancel = async () => {
    form.resetFields();
    setSecond(0);
    handleCancel();
  };

  // 验证码提交
  const onOk = () => {
    form
      .validateFields()
      .then(async (val) => {
        setLoading(true);
        const res = await verificationCode({
          code: val.code,
          phone: val.mobile,
          type: 9,
        });
        if (res.success) {
          handleOk(true);
        }
        setLoading(false);
      })
      .catch(() => {});
  };

  return (
    <CommonModal
      title="手机号验证"
      visible={phoneVisible}
      onOk={onOk}
      onCancel={ModalCancel}
      footer={[
        <Button key="cancel" onClick={ModalCancel}>
          取消
        </Button>,
        <Button key="ok" onClick={onOk} type="primary">
          下一步
        </Button>,
      ]}
    >
      <Form {...layout} name="phone-modal" form={form}>
        <Form.Item
          label="手机号"
          name="mobile"
          initialValue={userInfo.mobile ? userInfo.mobile : ''}
        >
          <Input placeholder="请输入手机号" disabled={true} />
        </Form.Item>

        <Form.Item
          label="手机验证码"
          name="code"
          rules={[
            {
              required: true,
              message: '请输入正确的手机验证码!',
            },
          ]}
        >
          <Row gutter={8}>
            <Col span={12}>
              <Input placeholder="请输入手机验证码" />
            </Col>
            <Col span={12}>
              <Button
                style={{ width: '109px' }}
                disabled={second}
                onClick={verification}
              >
                {second ? `${second}s` : '获取验证码'}
              </Button>
            </Col>
          </Row>
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default PhoneModal;
